<template>
  <section>
    <el-table :data="course.learners" v-loading="loading">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="姓名" prop="customerName"/>
      <el-table-column v-for="(p,index) in course.periods" :key="p.id" :label="p.title">
        <template slot-scope="scope">
          <!--{{index}}{{p.id}}-->
          <el-row v-if="scope.row.signs">
            <el-row v-if="scope.row.signs[p.id]">
              <el-tooltip :content="scope.row.signs[p.id]" placement="right">
                <i class="el-icon-check" style="color: green"></i>
              </el-tooltip>

            </el-row>
            <el-row v-else>
              <el-button size="mini" type="text" @click="sginBtn(scope.row,index,p)">签到</el-button>
            </el-row>
          </el-row>
          <el-row>
            <el-row v-if="new Date() - p.start >= 0">已开课</el-row>
            <el-row v-else>
              <span v-if="p.start-new Date() <= 10*60*1000" >{{getTime(p.start)}}倒计时：{{timeTmp}} 秒</span>
              <span v-else>未开课</span>
            </el-row>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "signInfo",
    props:['course'],
    data() {
      return {
        timeTmp:0,
        infoList:null,
        loading:false
      }
    },
    created(){
      this.loading=true
      console.log(this.course)
      this.getPeriodLearnerInfoList()
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch:{},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getTime(start){
        setTimeout(()=>{
          this.timeTmp=Math.floor((start - new Date())/1000)
        },1000)
      },
      timeFormatter(c){
        // console.log(a,b,c,d)
        return dateFormater.formatDatetime(c)
      },
      getPeriodLearnerInfoList(sizeNo){
        this.fetch({name:"getPeriodLearnerInfoList",data:{size:sizeNo? sizeNo:null,courseId:this.course.id}})
          .then(res=>{
            console.log(res)
            if(res.content.length >= res.totalElements){
              this.infoList=res.content
              this.makeShowSign(res.content)
              return
            }else {
              this.getPeriodLearnerInfoList(res.totalElements)
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      makeShowSign(array){
        console.log('签到信息————————',array)
        console.log('学员信息————————',this.course.learners)
        console.log('课时信息————————',this.course.periods)
        this.course.learners.forEach(l=>{
          // let signs=[]
          let tmp={}
          array.forEach(a=>{
            if(l.id === a.primary.learnerId){
              tmp[a.primary.periodId]=a.signIn?this.timeFormatter(a.signIn):null
            }
          })
          Vue.set(l,'signs',tmp)
        })
        // this.course.periods.forEach(p=>{
        //   let pTmp=[]
        //   array.forEach(a=>{
        //     if(p.id === a.primary.periodId){
        //       pTmp.push({...a.primary,signIn:a.signIn?a.signIn:null})
        //     }
        //   })
        //   p.pTmp=pTmp
        // })
        this.loading=false
        console.log('课时信息————————',this.course.learners)
      },
      sginBtn(row,index,p){
        console.log('签到按钮————————',row,index,p)
        this.signInByAdmin(row,index,p)
      },
      signInByAdmin(row,index,p){
        this.fetch({name:"signInByAdmin",data:{learnerId:row.id,periodId:p.id}})
          .then(res=>{
            console.log('签到成功————————',res,row.signs,row.signs,row.signs[p.id])
            Vue.set(row.signs,p.id,this.timeFormatter(res.signIn))
            // row.signs[p.id]=this.timeFormatter(res.signIn)
            // this.getPeriodLearnerInfoList()
            console.log('set了没————————',row)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
